<!--suppress HtmlDeprecatedAttribute -->
<template>
  <div class="wrapper" style="height: 100%">
    <goods-search v-model="goodSearchDialogVisible" @change="handleGoodSearchChange"/>
    <store-search v-model="storeSearchDialogVisible" @change="handleStoreSearchChange"/>
    <xum-title title="商品查询" :title-span="24"/>
    <el-form ref="form" v-model="form" label-width="100px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="商品编号" prop="goodId">
            <el-input v-model="form.goodId" size="small">
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer"
                 @click="handleOpenGoodSearch"/>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品名称" prop="goodName">
            <el-input v-model="form.goodName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品分类" prop="goodCategoryId">
            <el-cascader v-model="form.goodCategoryId" :options="categoryList" :show-all-levels="false"
                         :props="categoryCascaderProps" :disabled="categoryLoading ? true : null"
                         :placeholder="categoryLoading ? '加载中...' : '请选择'" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="店铺编号" prop="storeId">
            <el-input v-model="form.storeId" size="small">
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer"
                @click="handleOpenStoreSearch"/>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="margin-top: -12px;">
          <el-form-item label="店铺名称" prop="storeName">
            <el-input v-model="form.storeName" size="small"/>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="12" style="text-align: right; margin-top: -12px;">
          <el-button @click="handleReset" size="small">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery" size="small"
                     :loading="queryLoading">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <xum-title title="审核数据" :title-span="24"/>
    <el-table ref="table" :data="tableData" style="width: 100%" max-height="408" v-loading='false' :border="true">
      <el-table-column prop="id" align="center" label="商品编号" width="80"/>
      <el-table-column prop="name" align="center" label="商品名称" resizable width="210"/>
      <el-table-column prop="goodCategoryName" align="center" label="商品类别" resizable width="150"/>
      <el-table-column prop="storeId" align="center" label="店铺编号" width="80"/>
      <el-table-column prop="storeName" align="center" label="店铺名称" resizable width="210"/>
      <el-table-column prop="createTime" align="center" label="创建时间" resizable width="180"/>
      <el-table-column prop="state" align="center" label="状态" resizable width="100"/>
      <el-table-column prop="remark" align="center" label="备注" resizable/>
      <el-table-column label="操作" align="center" fixed="right" resizable width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleCheckGood(scope.row)"
                     v-if="scope.row.state === '审核中'">审核商品数据</el-button>
          <el-button type="text" size="small" v-else :disabled="true">已审核数据</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pagination" @size-change="handleSizeChange" @current-change='handleCurrentChange'
                   :page-size.sync='size' :total.sync="total" :current-page.sync="page" background
                   :disabled="queryLoading" layout="sizes, total, jumper, prev, pager, next"
                   style="margin: 20px auto; text-align: center"/>
    <good-check-drawer :good-id="checkGoodId" v-model="drawerVisible" @change="handleCheckGoodChange"/>
  </div>
</template>

<script>
import GoodsSearch from '@pages/goods/part/GoodsSearch'
import StoreSearch from '@pages/goods/part/StoreSearch'
import { queryGoodsByPageWrapperAdmin } from '@/api/ApiGoods'
import { ResultCode } from '@/constants/constants'
import PageDTO from '@/api/entity/PageDTO'
import GoodsAdminQueryDTO from '@/api/entity/GoodsAdminQueryDTO'
import { formatTime } from '@/utils/ConvertUtils'
import { queryGoodCategoryTree } from '@/api/ApiSysGoodCategory'
import { ConstantGoodState } from '@/constants/ConstantGoodState'
import GoodCheckDrawer from '@pages/goods/part/pageGoodsCheck/GoodCheckDrawer'
import XumTitle from '@/components/XumTitle'
export default {
  name: 'PageGoodsCheck',
  components: { XumTitle, GoodCheckDrawer, StoreSearch, GoodsSearch },
  data () {
    return {
      categoryCascaderProps: {
        expandTrigger: 'click',
        value: 'id',
        label: 'name',
        children: 'children',
        emitPath: false
      },
      categoryList: [],
      categoryLoading: false,
      queryLoading: false,
      goodSearchDialogVisible: false,
      storeSearchDialogVisible: false,
      drawerVisible: false,
      total: 0,
      page: 0,
      size: 10,
      form: {
        goodId: null,
        goodName: null,
        storeId: null,
        storeName: null,
        goodCategoryId: null
      },
      tableData: [],
      checkGoodId: null
    }
  },
  methods: {
    handleOpenGoodSearch () {
      this.goodSearchDialogVisible = true
    },
    handleOpenStoreSearch () {
      this.storeSearchDialogVisible = true
    },
    handleGoodSearchChange (val) {
      this.form.goodId = val.id
      this.form.goodName = val.name
      this.form.goodCategoryId = val.goodCategoryId
    },
    handleStoreSearchChange (val) {
      this.form.storeId = val.id
      this.form.storeName = val.name
    },
    handleReset () {
      this.queryLoading = false
      this.form = {}
      this.tableData = []

      this.total = 0
      this.page = 0
      this.size = 10
    },
    convertItem (item) {
      item.createTime = formatTime(item.createTime)
      return item
    },
    handleQuery () {
      const vm = this
      vm.queryLoading = true
      const pageDTO = PageDTO.instance()
      pageDTO.setCurrent(vm.page)
      pageDTO.setSize(vm.size)
      const wrapper = GoodsAdminQueryDTO.instance()
      wrapper.setState(ConstantGoodState.STATE_CHECKING)
      wrapper.setId(vm.form.goodId)
      wrapper.setName(vm.form.goodName)
      wrapper.setGoodCategoryId(vm.form.goodCategoryId)
      wrapper.setStoreId(vm.form.storeId)
      wrapper.setStoreName(vm.form.storeName)
      pageDTO.setCondition(wrapper)
      queryGoodsByPageWrapperAdmin(pageDTO, data => {
        if (data && data.code === ResultCode.OK) {
          const object = data.object
          if (object && object['records'] && typeof object['records'] === 'object') {
            const list = []
            object['records'].forEach(item => {
              list.push(vm.convertItem(item))
            })
            vm.total = object.total
            vm.tableData = list
            vm.$message.success('获取数据成功')
          }
        }
      }, () => {
        vm.queryLoading = false
      })
    },
    handleCheckGoodChange () {
      this.handleQuery()
      this.drawerVisible = false
    },
    handleCheckGood (goodData) {
      if (goodData && goodData.id) {
        this.checkGoodId = goodData.id
        this.drawerVisible = true
      }
    },
    handleSizeChange () {
      this.handleQuery()
    },
    handleCurrentChange () {
      this.handleQuery()
    },
    dealWithCategory (node) {
      if (node) {
        Object.assign(node, node.node)
        if (node.children) {
          node.children.forEach(this.dealWithCategory)
        }
      }
    }
  },
  mounted () {
    // 查询类别树
    this.categoryLoading = true
    queryGoodCategoryTree(data => {
      const rootList = data.object.children
      rootList.forEach(this.dealWithCategory)
      this.categoryList = rootList
    }, () => {
      this.categoryLoading = false
    })
  }
}
</script>

<style scoped>

</style>
